<div
    bsModal
    #modal="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modal"
    aria-hidden="true"
    [config]="{ backdrop: 'static' }"
>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    成本类型详细
                </h4>
                <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="primeng-datatable-container">
                    <p-table
                        [value]="costs"
                        rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                        [paginator]="false"
                        [lazy]="false"
                        [responsive]="primengTableHelper.isResponsive"
                    >
                        <ng-template pTemplate="header">
                            <tr>
                                <th style="width:33%">
                                    类型
                                </th>
                                <th style="width:33%">
                                    成本
                                </th>
                                <th>
                                    占比
                                </th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-record="$implicit">
                            <tr>
                                <td>
                                    {{ record.category }}
                                </td>
                                <td>
                                    {{ record.amount }}
                                </td>
                                <td>{{ (record.amount / totalAmount) * 100 | number: "1.2-2" }} %</td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>
            </div>
        </div>
    </div>
</div>
